<!DOCTYPE>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<head>
<title>测试position：absolute</title>
<style>
* {
	box-sizing: border-box;
}

body {
	margin: 0px;
	padding: 0px;
}

.grandpa {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: 100px;
	background: red;
	padding: 30px;
	position: relative;
	display: block;
}

.father1 {
	width: 100%;
	height: 100px;
	background: yellow;
	/* padding: 30px; */
    position: relative;
}

.father2 {
	width: 100%;
	height: 100px;
	background: green;
	padding: 30px;
}

.son1 {
	width: 100%;
	height: 180px;
	background: url("../images/hengtu.png");
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;
	padding: 30px;
	position: absolute;
}

.son2 {
	width: 100%;
	height: 100px;
	background: orange;
	padding: 30px;
	position: absolute;
}
</style>
</head>
<body>
	<!-- 测试position：absolute时,background：100%的覆盖面积 -->
	<div class="grandpa">
		<div class="father1">
			<div class="son1"></div>
		</div>
		<div class="father2">
			<div class="son2"></div>
		</div>
	</div>



</body>
</html>